<template>
	<swiper
	  v-if="swiperList.length>0"
	  :autoPlay='true'
	  :showIndicator='true'
	>
		<Slide v-for="(item,index) in swiperList" :key="index" class="swiper-item">
			<img :src="item.img_url" alt="" @load="swiperImageLoad">
			<p>{{item.title}}</p>
		</Slide>
	</swiper>
</template>

<script>
	/* id: 0
img_url: "https://s10.mogucdn.com/mlcdn/c45406/180926_45fkj8ifdj4l824l42dgf9hd0h495_750x390.jpg"
title: "焕新女装节" */
	import { Swiper, Slide } from 'vue-swiper-component';
	export default {
		name:'homeSwiper',
		data(){
			return {
				swiperList:[]
			}
		},
		props:{
			banner:{
				type:Array,
				default:[]
			}
		},
		components:{
			Swiper,
			Slide
		},
		watch:{
			banner(){
				for(let i = 0;i < this.banner.length;i++){
					this.swiperList.push({
						id:i,
						img_url:this.banner[i].image,
						title:this.banner[i].title
					})
				};
			}
		},
		methods:{
			swiperImageLoad(){
				this.$emit('swiperImageLoad')
			},
			imgLoad(){
				if( !this.isLoad ){
					this.$emit('swiperImageLoad');
					this.isLoad = true;
				}
			}
		}
	}
</script>

<style>
	.swiper-item {
		width: 100%;
	}
	
	.swiper-item img {
		width: 100%;
		height: auto;
	}
</style>
